<template>
<div>
    <!-- 所搜框 -->
  <div class="searchTop">
    <van-icon name="arrow-left" @click="$router.go(-1)"/>
    <input type="text" placeholder="薛之谦" v-model="searchKey" @keydown.enter="enterKey">
  </div>
  <!-- 历史记录 -->
  <div class="searchHistory">
    <span class="searchSpan">历史记录</span>
    <span v-for="item in keyWorldList" 
        :key="item" 
        class="spanKey" 
        @click="searchHistory(item)">
        {{item}}
    </span>
    <!-- 删除框 -->
    <van-icon name="delete"  class="delete_icon" @click="delHistory"/>
  </div>
    <ItemList :searchList="searchList"/>
</div>
</template>
<script>
import ItemList from '../components/item/ItemList'
import {getSearchMusic} from '../request/api/home'
export default {
    components:{
        ItemList
    },
    data(){
        return{
            keyWorldList:[], //保存输入的信息
            searchKey:"", //所搜关键字 双向绑定
            searchList:[], //保存api传过来的数据
        }
    },
    //挂载完成
    mounted(){
        //一开始挂载就以 localStorage 保存   
        this.keyWorldList = JSON.parse(localStorage.getItem('keyWorldList')) 
             ? JSON.parse(localStorage.getItem('keyWorldList')):[]
    },
    methods:{
        //键盘回车事件  添加搜索记录
        enterKey: async function (){
           if(this.searchKey !==""){
             this.keyWorldList.unshift(this.searchKey);
            //去重
            this.keyWorldList = [...new Set(this.keyWorldList)];

            //固定长度  所搜只能有 5 个历史记录，多的删除前面 的替换
            if(this.keyWorldList.length > 5){
                this.keyWorldList.splice(this.keyWorldList.length - 1, 1)
            }

            //把所搜列表保存在 localStorage  里面(永久保存)
            localStorage.setItem("keyWorldList",JSON.stringify(this.keyWorldList))
            let res = await getSearchMusic(this.searchKey)
            console.log(res)
            //赋值 接收数据
            this.searchList = res.data.result.songs
            this.enterKey =""
           }
           
       },
       //点击所搜历史获取到歌曲数据
        searchHistory: async function(item){
            let res = await getSearchMusic(item);
            this.searchList = res.data.result.songs
            console.log(res)

        },
       //删除框
       delHistory(){
           //removeItem 删除
            localStorage.removeItem("keyWorldList");  //删除浏览器里的 localStorage
            this.keyWorldList = []; //删除自己本身的
       }
    }
}
</script>
<style lang="less" scoped>
/* 所搜框 */
.searchTop{
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    padding: 0 .2rem;
    input{
        border: 0;
        border-bottom: 1px solid #999;
        width: 90%;
        padding: .1rem;
    }
}
/* 历史记录 */
.searchHistory{
    width: 100%;
    padding: .2rem;
    position: relative;
    .searchSpan{
        font-weight: 700;
    }
    .spanKey{
        padding: .1rem .2rem;
        background-color: rgb(185, 169,169);
        border-radius: 0.4rem;
        margin: 0.1rem 0.2rem;
        display: inline-block; //转成块级元素
    }
    .delete_icon{
        position: absolute;
        right: .3rem;
        font-size: .5rem;
    }
}
</style>